<template>
	<view class="main">
		<tou_hand1 handtitle='充值记录'></tou_hand1>
		<view class="show">
			<van-tabs v-model="active"  @change="gbtn">
				<van-tab title="本人充值记录" name="a">
					<view class="tapthree">
						<view class="cdjl-0" v-if="value">
							<view class="cdjl-0-l" @click="onShowDatePicker('range')">
								{{value[0]}}
							</view>-
							<view class="cdjl-0-l" @click="onShowDatePicker('range')">
								{{value[1]}}
							</view>
						</view>
						<van-collapse v-model="activeNames">
							<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
							<van-list v-model="loading" :offset="300" :finished="finished" finished-text="没有更多了" @load="loadMore">
							<van-cell v-for="(item, index) in bylist" :key="index" >
									<view>
										<view class="tphand">充值金额:{{item.balance}}</view>
										<view class="tpfoot">{{item.createTime}}</view>
									</view>
								<view class="showtap">
									<view class="stone">
										<view class="stoneleft">
											订单编号:
										</view>
										<view class="stoneright">
											{{item.orderNum}}
										</view>
									</view>
									
									
									<view class="stone">
										<view class="stoneleft">
											充值方式:
										</view>
										<view class="stoneright" v-show="item.payType=='1'">
											微信
										</view>
										<view class="stoneright" v-show="item.payType=='2'">
											支付宝
										</view>
										<view class="stoneright" v-show="item.payType=='6'">
											云闪付
										</view>
									</view>
									
									<view class="stone">
										<view class="stoneleft">
											赠送金额:
										</view>
										<view class="stoneright" >
											{{item.giveMoney}}
										</view>
										
									</view>
									
								</view>
							
							</van-cell>
							</van-list>
							</van-pull-refresh>
						</van-collapse>
					</view>
				</van-tab>
				<van-tab title="电卡代充记录"  name="b">
					<view class="tapthree">
						<view class="cdjl-0" v-if="value">
							<view class="cdjl-0-l" @click="onShowDatePicker('range')">
								{{value[0]}}
							</view>-
							<view class="cdjl-0-l" @click="onShowDatePicker('range')">
								{{value[1]}}
							</view>
						</view>
						<van-collapse v-model="activeNames1">
							<van-pull-refresh v-model="yrefreshing" @refresh="yonRefresh">
							<van-list v-model="yloading" :offset="300" :finished="yfinished" finished-text="没有更多了" @load="yloadMore">
							<van-cell v-for="(item, index) in yuelist" :key="index" >
									<view>
										<view class="tphand">充值金额:{{item.balance}}</view>
										<view class="tpfoot">{{item.createTime}}</view>
									</view>
								<view class="showtap">
									<view class="stone">
										<view class="stoneleft">
											订单编号:
										</view>
										<view class="stoneright">
											{{item.orderNum}}
										</view>
									</view>
									
									
									<view class="stone">
										<view class="stoneleft">
											充值方式:
										</view>
										<view class="stoneright" v-show="item.payType=='1'">
											微信
										</view>
										<view class="stoneright" v-show="item.payType=='2'">
											支付宝
										</view>
										 <view class="stoneright" v-show="item.payType=='6'">
											云闪付
										</view>
									</view>
									
									<view class="stone">
										<view class="stoneleft">
											赠送金额:
										</view>
										<view class="stoneright" >
											{{item.giveMoney}}
										</view>
										
									</view>
									<view class="stone">
										<view class="stoneleft">
											电卡编号:
										</view>
										<view class="stoneright" >
											{{item.cardNum}}
										</view>
										
									</view>
									<view class="stone">
										<view class="stoneleft">
											被充值人人编号:
										</view>
										<view class="stoneright" >
											{{item.cardUserId}}
										</view>
										
									</view>
									
								
								</view>
							
							</van-cell>
							</van-list>
							</van-pull-refresh>
						</van-collapse>
					</view>
				</van-tab>
			</van-tabs>
		</view>
		<date-picker :show="showPicker" :type="type" class="mask" :value="value" :show-tips="true" :begin-text="'开始'"
		 :end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onCancel"></date-picker>
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand2/tou_hand2.vue'
	import datePicker from "../../components/mx-datepicker.vue";
	import {formatDate} from '../../common/formatDate.js'
	export default {
		components: {tou_hand1,datePicker},
		mounted() {
			document.querySelector('body').setAttribute('style', 'background-color:#2A3034')
		},
		created() {
			this.show();
			
		},
		data() {
			return {
				active: 'a',
				activeNames: [''], //当前展开面板的 name
				activeNames1: [''], //当前展开面板的 name
				value: ['请选择开始时间', '请选择结束时间'],
				type: 'range', //时间选择器
				showPicker: false, //时间选择器
				bylist:[],//包月退款数据
				yuelist:[],//余额退款数据
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 10, //每页显示的条数
				yloading: false,
				yfinished: false,
				yrefreshing: false,
				ypageNum: 1, //页码
				ypageSize: 10, //每页显示的条数
			}
		},
		onLoad(option) {
			if(option.type){
				this.active=option.type
			}else{
				this.active='a'
			}
			this.show();
			if(this.active=='a'){
				this.loadMore();
			}else if(this.active=='b'){
				this.yloadMore()
			}
		},
		methods: {
			show(){
				var nowtime = formatDate(new Date(),'yyyy-MM-dd');				
				var oldtime=formatDate(new Date(new Date().getTime()-2592000000),'yyyy-MM-dd');
				this.value=[oldtime,nowtime]
				// this.bybtn();
			},
			gbtn(vul){
				vul = vul.detail.name
				if(vul=='a'){
					this.bylist = [];
					this.onRefresh()
				}else if(vul=='b'){
					this.yuelist = [];
					this.yonRefresh()
				}
			},
			// 本人充值记录分页
			loadMore() {
				if (this.refreshing) {
				  this.bylist = [];
				  this.refreshing = false;
				}
				const that = this;
				let data = {
					userId: uni.getStorageSync('userId'),
					pageNum:that.pageNum,
					pageSize:that.pageSize,
					startTime:that.value[0],
					endTime:that.value[1],
					type:1
				}
				that.loading = true;
				that.$base.request('recharge/list', 'GET', data)
					.then(res => {
						that.loading = false;
						if(res.data.rows&&res.data.rows.length>0){
							that.bylist = that.bylist.concat(res.data.rows);
							that.pageNum += 1;
						}else{
							that.finished = true;
						}
					})
					.catch(err => {
				
					})
			},
			 onRefresh() {
			      // 清空列表数据
			      this.finished = false;
				  this.pageNum=1
			      // 重新加载数据
			      // 将 loading 设置为 true，表示处于加载状态
			      this.loading = true;
			      this.loadMore();
			    },
			// 本人充值记录查询
			bybtn(){
				let data = {
					userId: uni.getStorageSync('userId'),
					pageNum:this.pageNum,
					pageSize:this.pageSize,
					startTime:this.value[0],
					endTime:this.value[1],
					type:1
				}
				this.$base.request('recharge/list', 'GET', data)
					.then(res => {
						if(res.data.code==200){
							this.bylist=res.data.rows
						}else{
							this.$toast.fail(res.data.msg)
						}
					})
					.catch(err => {
						
					})
			},
			//给他人充值记录分页
			yloadMore() {
				if (this.yrefreshing) {
				  this.yuelist = [];
				  this.yrefreshing = false;
				}
				const that = this;
				let data = {
					userId: uni.getStorageSync('userId'),
					pageNum:that.ypageNum,
					pageSize:that.ypageSize,
					startTime:that.value[0],
					endTime:that.value[1],
					type:0
				}
				that.yloading = true;
				that.$base.request('recharge/list', 'GET', data)
					.then(res => {
						that.yloading = false;
						if(res.data.rows&&res.data.rows.length>0){
							that.yuelist = that.yuelist.concat(res.data.rows);
							that.ypageNum += 1;
						}else{
							that.yfinished = true;
						}
					})
					.catch(err => {
				
					})
			},
			 yonRefresh() {
			      // 清空列表数据
			      this.yfinished = false;
				  this.ypageNum=1
			      // 重新加载数据
			      // 将 loading 设置为 true，表示处于加载状态
			      this.yloading = true;
			      this.yloadMore();
			    },
			// 给他人充值记录查询
			yuebtn(){
				let data = {
					userId: uni.getStorageSync('userId'),
					pageNum:this.ypageNum,
					pageSize:this.ypageSize,
					startTime:this.value[0],
					endTime:this.value[1],
					type:0
				}
				this.$base.request('recharge/list', 'GET', data)
					.then(res => {
						if(res.data.code==200){
							this.yuelist=res.data.rows
						}else{
							this.$toast.fail(res.data.msg)
						}
					})
					.catch(err => {
						
					})
			},
			//选择时间点击确定
			onSelected(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					for(var i=0;i<e.value.length;i++){
						e.value[i]=formatDate(new Date(e.value[i]),'yyyy-MM-dd')
					}
					this.value = e.value;
					if(this.active=='a'){
						this.bylist = [];
						this.onRefresh()
					}else if(this.active=='b'){
						this.yuelist = [];
						this.yonRefresh()
					}
				}
			},
			//选择时间点击取消
			onCancel() {
				this.showPicker = false;
				var nowtime = formatDate(new Date(),'yyyy-MM-dd');
				var oldtime=formatDate(new Date(new Date().getTime()-2592000000),'yyyy-MM-dd');
				this.value=[oldtime,nowtime]
			},
			//点击时间框选择时间
			onShowDatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		// overflow-x: hidden;
		background-color: #2A3034;
		/deep/.van-list__finished-text{
			margin-top: 100upx;
			padding-bottom: 200upx;
		}
		/deep/.van-hairline--top-bottom::after{
			border-width: 0;
		}
		.show {
			/deep/.van-tab {
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				color: #999999;
			}
			/deep/.van-cell{
				margin-top: 30upx;
				background-color: #3A4044;
			}
			/deep/.van-cell:not(:last-child)::after{
				border: 0upx;
			}
			/deep/.van-tab--active {
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				color: #8DC321;
			}

			/deep/.van-tabs__line {
				width: 91upx !important;
				height: 4upx;
				border-radius: 2px;
				background-color: #8DC321;
			}
			/deep/.van-tabs__nav{
				background-color: #2A3034;
			}
			
			.tapthree {
				width: 686upx;
				margin: 16upx auto;
				.cdjl-0 {
					display: flex;
					height: 100upx;
					background: #3A4044;
					align-items: center;
					justify-content: space-around;
					border-radius: 18upx;
				
					.cdjl-0-l {
						height: 60upx;
						width: 260upx;
						border-radius: 10upx;
						border: 2upx solid #ccc;
						font-size: 30upx;
						line-height: 60upx;
						color: #bbbbbb;
						text-align: center;
					}
				
					.cdjl-0-r {
						width: 120upx;
						height: 60upx;
						font-size: 20upx;
						background: #4e9ff6;
						color: #fff;
						line-height: 60upx;
						text-align: center;
						border-radius: 10upx;
					}
				}
				.tphand {
					font-size: 28upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #fff;
				}

				.tpfoot {
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #fff;
					margin-top: 10upx;
				}

				/deep/.van-collapse {
					background-color: #2A3034;
				}

				/deep/.van-collapse-item {
					margin-top: 22upx;
				}
				
				/deep/.van-collapse-item__content {
					padding: 0 30upx;
					background-color: #3A4044;
				}

				/deep/.van-cell {
					align-items: center;
					padding: 0 14upx;
					background-color: #3A4044;
					border-radius: 18upx;
				}

				.showtap {
					width: 100%;
					box-sizing: border-box;
					padding: 40upx 0;

					.stone {
						width: 100%;
						box-sizing: border-box;
						display: flex;
						margin-bottom: 15upx;

						.stoneleft {
							font-size: 24upx;
							font-family: PingFang SC Regular, PingFang SC Regular-Regular;
							font-weight: 400;
							color: #D0D0D0;
							width: 45%;
						}

						.stoneright {
							font-size: 24upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #D0D0D0;
						}
					}
				}

			}


		}

	}
</style>
